<template>
  <div class="submitCart">
    <div style="padding: 30px;">
      <el-row>
        <el-col :span="24">
          <span style="font-size: 18px; ">餐单详情</span>
        </el-col>
      </el-row>
      <div class="cart_item">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="20">
            <i class="iconfont icon-mendian" style="font-size: 20px;"></i><span
              style="font-size:16px; font-weight: bold; margin-left: 5px;">{{cartDto.storeName}}</span>
          </el-col>
          <el-col :span="4">
              <el-link type="warning" style="font-size: 15px;" @click="returnStore">返回商家</el-link>
          </el-col>
        </el-row>
        <el-row class="item_row">
          <el-col :span="11">
            <span>商品</span>
          </el-col>
          <el-col :span="9">
            <span>份数</span>
          </el-col>
          <el-col :span="4">
            <span>小计(元)</span>
          </el-col>
        </el-row>
        <el-row class="item_row" v-for="item in cartDto.items">
          <div class="food_item">
            <el-col :span="11">
              <span>{{item.foodName}}</span>
            </el-col>
            <el-col :span="9">
              <span style="font-size: 15px;">X {{item.count}}</span>
            </el-col>
            <el-col :span="4">
              <span style="color: rgb(255, 170, 0);">&yen;{{item.price}}</span>
            </el-col>
          </div>
        </el-row>
        <el-row class="item_row">
          <el-col :span="20">
            <span>包装盒</span>
          </el-col>
          <el-col :span="4">
            <span style="color: rgb(139, 139, 139);">&yen;{{cartDto.packPrice}}</span>
          </el-col>
        </el-row>
        <el-row class="item_row">
          <el-col :span="20">
            <span>配送费(不计入起送价)</span>
          </el-col>
          <el-col :span="4">
            <span style="color: rgb(139, 139, 139);">&yen;{{cartDto.dphPrice}}</span>
          </el-col>
        </el-row>
        <el-row class="item_row">
          <el-col :span="4" :offset="20">
            <span>共计</span>
            <span style="font-size: 26px; color: red; font-weight: bold;">&yen;{{cartDto.price}}</span>
          </el-col>
        </el-row>


      </div>

      <div class="u_address">
        <el-row class="item_row">
          <el-col :span="4">
            <span style="font-size: 20px; font-weight: bold;">收货地址</span>
          </el-col>
          <el-col :span="4" :offset="16">
            <span style="color: darkgrey; cursor: pointer; font-size:18px;">
              <i class="el-icon-circle-plus-outline" style="font-size: 24px;  "></i>
              <el-link :underline="false" @click="dialogFormVisible = true" style="margin-bottom: 10px;">添加新地址</el-link>
            </span>
          </el-col>
        </el-row>
        <el-row class="item_row" style="height: 100%;">
          <el-table border ref="singleTable" :cell-style="{borderColor:'#F08300'}" :data="addresses"
            :show-header="false" highlight-current-row @current-change="handleCurrentChange"
            style="width: 90%; margin-left: 5%;  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">

            <el-table-column label="地址信息">
              <template slot-scope="scope">
                <el-row class="addr_item">
                  <el-col :span="16" :offset="2">
                    {{scope.row.receiveName}}&nbsp;{{scope.row.sex}} ： {{scope.row.reveivePhone}}
                  </el-col>
                  <el-col :span="4">
                    <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                  </el-col>
                </el-row>
                <el-row class="addr_item">
                  <el-col :span="20" :offset="2">
                    详细地址：{{scope.row.address}}
                  </el-col>
                  <el-col :span="2">
                    <el-radio v-model="defaultArr" :label="scope.row.id">选择地址</el-radio>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>


          </el-table>
        </el-row>
      </div>

      <div class="u_foodter">
        <el-row class="item_row">
          <span style="font-size: 20px; font-weight: bold;">其他信息</span>
        </el-row>
        <el-row class="item_row">
          <el-col :span="2"><span>订单备注:</span></el-col>
          <el-col :span="7">
            <el-input v-model="remarks" type="textarea" :rows="2" placeholder="不要辣,多放盐等口味要求"></el-input>
          </el-col>
        </el-row>
      </div>


      <el-row>
        <el-col :span='5' :offset="19" style="background-color: rgb(255, 170, 0); height: 50px;">
          <span style="line-height: 50px; cursor: pointer; margin-left: 90px; font-weight: bold;"
            @click="addOrder">立即支付</span>
        </el-col>
      </el-row>




    </div>

    <el-dialog title="添加新地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="form.receiveName" autocomplete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-radio v-model="form.sex" label="先生"></el-radio>
          <el-radio v-model="form.sex" label="女士"></el-radio>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.reveivePhone" autocomplete="off" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="收餐地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="warning" @click="addAddress">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改地址信息" :visible.sync="dialogFormVisible2">
      <el-form :model="modForm">
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="modForm.receiveName" autocomplete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-radio v-model="modForm.sex" label="先生"></el-radio>
          <el-radio v-model="modForm.sex" label="女士"></el-radio>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="modForm.reveivePhone" autocomplete="off" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="收餐地址" :label-width="formLabelWidth">
          <el-input v-model="modForm.address" autocomplete="off" placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="warning" @click="ackEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'SubmitCart',
    data() {
      return {
        cartDto: {},
        selectAddr: null,
        addresses: [],
        dialogFormVisible: false,
        formLabelWidth: '100px',
        form: {},
        defaultArr: "1",
        modForm: {},
        dialogFormVisible2: false,
        remarks: "",
        foodIds:[],
        num:"",
      }
    },
    methods: {

      returnStore(){
         this.$router.push("/U_store?id=" + this.cartDto.storeId);
      },

      addAddress() {
        this.dialogFormVisible = false;
        this.$http.post("/userAddress/newAddr", this.form).then(resp => {
          if (resp.data.code == 200) {
            this.form = {};
            this.getAllAddress();
          }
        })
      },

      handleCurrentChange(val) {
        this.selectAddr = val;
      },

      getAllAddress() {
        this.$http.get("/userAddress/userAddress").then(resp => {
          if (resp.data.code == 200) {
            console.log(resp);
            this.addresses = resp.data.data;
            this.defaultArr = this.addresses[0].defaultArr;
            // console.log(this.defaultArr);
          }
        })
      },
      handleEdit(addr) {
        this.modForm = addr;
        this.dialogFormVisible2 = true;
      },
      ackEdit() {
        this.$http.put("/userAddress/modifyAddr", this.modForm).then(resp => {
          if (resp.data.code == 200) {
            this.dialogFormVisible2 = false;
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.modForm = {};
            this.getAllAddress();
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      handleDelete(addr) {
        this.$http.delete("/userAddress/delAddress", {
          params: {
            addressId: addr.id
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getAllAddress();
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      addOrder(){
        if(this.selectAddr==null){
          this.$message.error('请选择地址信息!');
        }else{
          this.foodIds = [];
          console.log(this.cartDto);
          for (const i of this.cartDto.items) {
            this.foodIds.push(i.foodId);
          }
          this.$http.post("/dietOrder/addOrder",{
            storeId:this.cartDto.storeId,
            storeName:this.cartDto.storeName,
            dispatching:this.cartDto.dispatching,
            dphPrice:this.cartDto.dphPrice,
            packPrice:this.cartDto.packPrice,
            price:this.cartDto.price,
            orderPhone:this.selectAddr.reveivePhone,
            receiveName:this.selectAddr.receiveName,
            address:this.selectAddr.address,
            remarks:this.remarks,
            foodIds:this.foodIds
          }).then(resp=>{
              console.log(resp);
              if(resp.data.code==200){
                this.remarks="";
                this.foodIds=[];
                this.selectAddr=null;
                this.num = resp.data.data.orderNum;
                console.log(this.num)
                this.$http.get("/dietOrder/pay/"+this.num).then(res=>{
                  console.log(res);
                  if(res.status==200){
                    let divForm = document.getElementsByTagName('divform')
                       if (divForm.length) {
                           document.body.removeChild(divForm[0])
                        }
                        const div=document.createElement('divform');
                        div.innerHTML=res.data;
                        document.body.appendChild(div);
                        document.forms[0].setAttribute('target', '_blank')
                        document.forms[0].submit();

                        this.$router.push("/cart");

                  }
                })
              }
              else{
                this.$message.error('下单失败，请稍后再试');
              }
          })
        }
      },

    },
    created() {

      this.cartDto = JSON.parse(localStorage.getItem("cartInfo"));
      this.getAllAddress();


    }
  }
</script>

<style scoped>
  .u_address {
    margin-top: 5px;
    background-color: rgb(245, 247, 250);
    padding-bottom: 20px;
  }
  .u_foodter{
    margin: 10px 0px;
    background-color: rgb(245, 247, 250);
    padding-bottom: 10px;

  }


  .submitCart {
    background-color: rgb(239, 238, 230);
    margin: 0;
    width: 100%;
  }


  .item_row {
    border-bottom: 1px solid gainsboro;
    height: 55px;
    background-color: rgb(245, 247, 250);
    padding-left: 8px;
    font-size: 14px;
    line-height: 55px;
  }

  .cart_item {
    margin-top: 20px;
  }

  .addr_item {
    border-bottom: 1px solid gainsboro;
    height: 45px;
    padding-left: 8px;
    font-size: 14px;
    line-height: 45px;
    margin-bottom: 5px;

  }
</style>
